<template>
  <div class="amap-page-container">
    <div class="map-content">
      <el-amap
        v-if="center"
        ref="map"
        vid="amapDemo"
        :amap-manager="amapManager"
        :events="events"
        :center="center"
        expand-zoom-range="true"
        :zoom="zoom"
        :plugin="plugins"
        :pitch="66"
        @click.native="ocClick"
      >
        <!-- <el-amap-marker :position="center" :icon="icon" :title="address"> -->
        <!-- </el-amap-marker> -->
      </el-amap>
    </div>
    <div class="toolbar">
      position: [{{ lng }}, {{ lat }}] address: {{ address }}
    </div>
  </div>
</template>

<script>
import { AMapManager } from 'vue-amap'
const amapManager = new AMapManager()
export default {
  name: 'MapComponent',
  props: {
    position: {
      type: Array,
      String,
      default: null
    }
  },
  data() {
    const self = this
    return {
      amapManager,
      zoom: 16,
      center: null,
      address: '',
      searchOption: {
        city: '',
        citylimit: true
      },
      markers: [
        // [121.59996, 31.197646],
        // [121.40018, 31.197622],
        // [121.69991, 31.207649]
      ],
      events: {
        click: (e) => {
          const { lng, lat } = e.lnglat
          self.lng = lng
          self.lat = lat
          console.log(lng, lat)
          // this.center[0] = lng;
          // this.center[1] = lat;
          // console.log(this.center);

          // // 这里通过高德 SDK 完成。
          // var geocoder = new AMap.Geocoder({
          //   radius: 1000,
          //   extensions: "all",
          // });
          // geocoder.getAddress([lng, lat], function (status, result) {
          //   if (status === "complete" && result.info === "OK") {
          //     if (result && result.regeocode) {
          //       self.center = [self.lng, self.lat];
          //       self.address = result.regeocode.formattedAddress;
          //       self.$nextTick();
          //       self.locationChange();
          //     }
          //   }
          // });
        }
      },
      lng: 0,
      lat: 0,
      plugins: [
        {
          enableHighAccuracy: true, // 是否使用高精度定位，默认:true
          timeout: 100, // 超过10秒后停止定位，默认：无穷大
          maximumAge: 0, // 定位结果缓存0毫秒，默认：0
          convert: true, // 自动偏移坐标，偏移后的坐标为高德坐标，默认：true
          showButton: true, // 显示定位按钮，默认：true
          buttonPosition: 'LB', // 定位按钮停靠位置，默认：'LB'，左下角
          showMarker: true, // 定位成功后在定位到的位置显示点标记，默认：true
          showCircle: true, // 定位成功后用圆圈表示定位精度范围，默认：true
          panToLocation: false, // 定位成功后将定位到的位置作为地图中心点，默认：true
          zoomToAccuracy: true, // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：f
          extensions: 'all',
          // 地图定位按钮
          pName: 'Geolocation',
          init(o) {
            // o 是高德地图定位插件实例
            o.getCurrentPosition((status, result) => {
              console.log(result)
              debugger
              if (result && result.position) {
                self.lng = result.position.lng
                self.lat = result.position.lat
                self.center = [self.lng, self.lat]
                self.loaded = true
                self.$nextTick()
              }
            })
          }
        }
      ],
      icon: null
    }
  },
  created() {
    this.center = this.position
    console.log('修改定位')
    // if (this.locationInfo) {
    //   this.iocn = this.locationInfo.iocn;
    //   this.name = this.locationInfo.name;
    //   this.address = this.locationInfo.address;
    //   this.lng = this.locationInfo.longitude;
    //   this.lat = this.locationInfo.latitude;
    //   this.center = [this.lng, this.lat];
    // } else {
    //   var Geolocation = new AMap.Geolocation({
    //     radius: 1000,
    //     extensions: "all",
    //   });
    // }
  },
  methods: {
    ocClick() {
      console.log(this.center)
      this.$emit('getPosition', this.center)
      console.log(this.$parent)
    }
    // locationChange() {
    //   if (this.changeCall) {
    //     this.changeCall(this.address, this.lng, this.lat);
    //   }
    // },
    // onSearchResult(pois) {
    //   let latSum = 0;
    //   let lngSum = 0;
    //   if (pois.length > 0) {
    //     pois.forEach((poi) => {
    //       let { lng, lat } = poi;
    //       lngSum += lng;
    //       latSum += lat;
    //       this.markers.push([poi.lng, poi.lat]);
    //     });
    //     let center = {
    //       lng: lngSum / pois.length,
    //       lat: latSum / pois.length,
    //     };
    //     this.center = [center.lng, center.lat];
    //   }
    // },
  }
}
</script>

<style>
.amap-page-container {
  width: 100%;
  height: 500px;
}
.search-box {
  position: absolute;
  top: 65px;
  left: 20px;
}
.map-content {
  height: 90%;
}
</style>
